<!--
 * @author: wangshuaixue
 * @Date: 2024-09-25 11:10:55
 * @description: 
 * @LastEditTime: 2024-09-27 15:25:00
 * @LastEditors: wangshuaixue
 * @FilePath: /plant/src/components/QueTemp.vue
-->

<template>
  <div>
    <div class="recommond-title">试试下面推荐的问题</div>
    <div class="recommond-container">
      <div
        class="recommond-q"
        v-for="qa in listData"
        :key="qa.id"
      >{{qa.q}}</div>
    </div>
  </div>
</template>

<script>
  import { ref } from 'vue';
  export default {
    setup() {
      const dialogFormVisible = ref(false);
      const form = ref({
        name: '',
        data: '',
      });
      const formLabelWidth = '120px';
      const listData = ref([
        {
          id: 1,
          q: '如何从一个表中选择所有列？',
          a: 'SELECT * FROM 表名;',
        },
        {
          id: 2,
          q: '如何从一个表中选择特定的列？？',
          a: 'SELECT * FROM 表名;',
        },
        {
          id: 3,
          q: '你想要根据某个条件过滤表中的数据。？',
          a: 'SELECT * FROM 表名;',
        },
        {
          id: 4,
          q: '你想要按照某个列对数据进行升序或降序排序？',
          a: 'SELECT * FROM 表名;',
        },
      ]);

      function openDialog() {
        dialogFormVisible.value = true;
      }
      function createQuestion() {
        const question = {
          content: form.value.desc,
        };
        // this.$http.post('/api/questions', question).then(() => {
        //   this.$router.push('/');
        // });
      }
      function addTable() {
        tableData.value.push({
          name: form.value.name,
          data: form.value.data,
        });
        console.log(tableData.value, 'tableData');
        form.value.name = '';
        form.value.data = '';
        dialogFormVisible.value = false;
      }

      return {
        listData,
        dialogFormVisible,
        form,
        formLabelWidth,
        openDialog,
        createQuestion,
        addTable,
      };
    },
  };
</script>
<style  lang="scss"  scoped>
.recommond-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.recommond-container {
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;

  .recommond-q {
    display: flex;
    align-items: center;
    width: 40%;
    height: 100px;
    padding: 0 30px;
    margin: 0 10px 20px;
    background-color: #fff;
    border-radius: 10px;
  }
}
</style>